<template>
	<view class="guest_detail">
		<view class="guest_info">
			<view class="guest_top">
				<text>访客信息</text>
				<tagVue v-if="store.guestDetail?.status === 4" title="生效中" :bgColor="backgroundColor3"
					:textColor="textColor3"></tagVue>
				<tagVue v-else-if="store.guestDetail?.status === 5" title="待生效" :bgColor="backgroundColor2"
					:textColor="textColor2"></tagVue>
				<tagVue v-else-if="store.guestDetail?.status === 6" title="已失效" :bgColor="backgroundColor4"
					:textColor="textColor4"></tagVue>
			</view>
			<view class="guest_item">
				<text>房屋</text>
				<view>{{ store.guestDetail?.address }}</view>
			</view>
			<view class="guest_item">
				<text>访客姓名</text>
				<view>{{ store.guestDetail?.guestName }}</view>
			</view>
			<view class="guest_item">
				<text>访客性别</text>
				<view>{{ store.guestDetail?.sex }}</view>
			</view>
			<view class="guest_item">
				<text>手机号码</text>
				<view>{{ store.guestDetail?.phone }}</view>
			</view>
			<view class="guest_item">
				<text>访问日期</text>
				<view>{{ store.guestDetail?.guestDate }}</view>
			</view>
			<view class="guest_item">
				<text>访问时长</text>
				<view>{{ store.guestDetail?.guestTimer }}</view>
			</view>
		</view>
		<button @click="goPassPorts">查看通行证</button>
	</view>
</template>

<script setup>
	import tagVue from '@/components/tag.vue';
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		useMyStore
	} from '@/stores/myStore.js';
	const id = ref(0);
	const store = useMyStore();
	const backgroundColor2 = ref('#ffe9d7');
	const textColor2 = ref('#ff9180');
	const backgroundColor3 = ref('#d4f6e3');
	const textColor3 = ref('#2ed477');
	const backgroundColor4 = ref('#f2f2f2');
	const textColor4 = ref('#cdcdcd');
	const guest = ref({});
	onLoad((options) => {
		id.value = options.id;
	});
	onMounted(() => {
		store.getGuestDetail(id.value);
	});
	const goPassPorts = () => {
		uni.navigateTo({
			url: '/pages/server/views/CardPass/CardPass'
		});
	};
</script>

<style lang="scss">
	.guest_detail {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background-color: #fff;

		.guest_info {
			width: 100%;
			border: 2rpx solid #f2f2f2;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 0 30rpx;

			.guest_top {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text::before {
					content: '|';
					width: 18rpx;
					height: 40rpx;
					display: inline-block;
					vertical-align: middle;
					text-align: center;
					line-height: 40rpx;
					border-radius: 20rpx;
					color: #006eff;
					background-color: #006eff;
					margin-right: 20rpx;
				}
			}

			.guest_item {
				width: 100%;
				height: 110rpx;
				border-bottom: 2rpx solid #f2f2f2;
				display: flex;
				align-items: center;

				text {
					width: 160rpx;
					color: #9a9a9a;
				}
			}
		}

		button {
			border: none;
			background-color: #006eff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			margin: 30rpx 0;
		}
	}
</style>